<!-- eslint-disable vue/no-lone-template -->
<template>
  <div class="interfaceWindow">
    <div class="left">
      <div class="interfaceName">
        <a-descriptions bordered>
          <a-descriptions-item label="接口名称" :span="3">{{ apiDetail.apiName }}</a-descriptions-item>
          <a-descriptions-item label="Request URL" :span="3">{{ apiDetail.apiAgreement }}://{{ apiDetail.apiIpPort }}{{ apiDetail.apiPath }}</a-descriptions-item>
          <a-descriptions-item label="请求方式" :span="3">{{ apiDetail.apiRequestMethod }}</a-descriptions-item>
        </a-descriptions>
      </div>

      <div class="parameter">
        <div class="inputParameter">
          <p style="float: left">输入参数</p>
          <a-table :columns="inputParameter" :data-source="paramList" size="small" :pagination="false" bordered :row-expandable="true">
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'apcValue'">
                <a><a-input v-model:value="record.apcValue" :placeholder="defaultValue" @focus.once="onFocus(record)" /></a>
              </template>
            </template>
          </a-table>
        </div>

        <template v-if="apiDetail.apiRequestMethod == 'POST'">
          <p style="float: left">请求body</p>
          <a-textarea v-model:value="requestBody" :rows="6" allow-clear />
        </template>
      </div>
      <a-button type="primary" class="test" :disabled="testDisabled" @click="test">测试</a-button>
    </div>
    <div class="result">
      <p>返回结果(JSON)</p>
      <JsonViewer :value="jsonData" copyable boxed sort theme="dark" />
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { postInterfaceTest } from '@/api/test';
  import { RequestMethod } from '@/enums/statusEnum';
  import { getInterfaceDetailsHooks } from '@/hooks/InterfaceManagementHooks/getInterfaceDetailsHooks';
  import { addingApiParamterConfig, apiTest } from '@/pages/CodeTables/specification';
  import { cloneDeep } from 'lodash-es';
  import { JsonViewer } from 'vue3-json-viewer';
  import 'vue3-json-viewer/dist/index.css';
  //请求参数的数据;--表头
  const inputParameter = [
    {
      title: '参数名称',
      width: '20%',
      align: 'center',
      dataIndex: 'apcName',
    },
    {
      title: '数据类型',
      width: '10%',
      align: 'center',
      dataIndex: 'apcDataType',
    },
    {
      title: '参数位置',
      width: '10%',
      align: 'center',
      dataIndex: 'apcPosition',
    },
    {
      title: '是否必填',
      width: '10%',
      align: 'center',
      dataIndex: 'apcDataNull',
    },
    {
      title: '测试值',
      width: '20%',
      align: 'center',
      dataIndex: 'apcValue',
    },
  ];
  // 引入hooks
  const { apiDetail, paramList, generateList } = getInterfaceDetailsHooks();
  // 初始默认值
  const defaultValue = ref<string>('');
  // 按钮是否禁用
  const testDisabled = ref<boolean>(false);

  /*   testDisabled.value = computed(() => {
    return apiDetail.value.paramList.some(item => {
      return item.apcValue === '';
    });
  }); */

  const onFocus = (e: addingApiParamterConfig) => {
    console.log(e.apcValue);
    defaultValue.value = e.apcValue as string;
  };

  // 展示json
  const jsonData = ref({});
  // 请求方式为post是输入的值
  const requestBody = ref<string>('');
  // 测试按钮
  const test = async () => {
    let apiRequestMethod = RequestMethod[apiDetail.value.apiRequestMethod as number];
    let inputParams = cloneDeep(paramList.value);
    generateList(inputParams);
    console.log(inputParams);

    const postTestData: apiTest = {
      //GET 或 POST
      apiRequestMethod,
      //超时时间
      apiRequestTimeout: apiDetail.value.apiRequestTimeout,
      //body参数发json字符串string
      bodyParameters: requestBody.value,
      //query或header参数,确认位置拼接，主要·顺序
      inputParams,
      url: `${apiDetail.value.apiAgreement}://${apiDetail.value.apiIpPort}${apiDetail.value.apiPath}`,
    };
    console.log(postTestData);
    let res = await postInterfaceTest(postTestData);
    jsonData.value = JSON.parse(res);
  };
</script>

<style lang="less" scoped>
  .interfaceWindow {
    display: flex;

    :deep(.ant-descriptions-item-label) {
      width: 20%;
    }
  }

  .left {
    float: left;
    width: 60%;

    ::-webkit-scrollbar {
      width: 0 !important;
    }

    .parameter {
      overflow: hidden;
      overflow-y: auto;
      height: 320px;
      box-shadow: inset 0 -20px 20px -20px #9e9e9e57;
    }

    .test {
      float: left;
      margin-top: 20px;
      margin-left: 4%;
    }
  }

  .result {
    margin-left: 6%;
    width: 35%;

    .jv-container {
      width: 100%;
      height: 90%;
      text-align: left;
    }
  }

  .inputParameter {
    margin-top: 4%;
  }
</style>
